<template>
  <div class="box">
    <form @submit.prevent="handleSubmit">
      <input
        type="text"
        v-model="phone"
        placeholder="手机号"
        class="form-item form-input"
        autofocus
      />
      <div class="form-item code">
        <input
          type="password"
          v-model="code"
          placeholder="短信验证码"
          class="form-input"
        />
        <button class="send-code" @click="showSlide">发送验证码</button>
      </div>
      <button type="submit" class="form-item form-input form-submit">
        登录/注册
      </button>

      <div class="form-footer">
        <div class="footer-item">
          <input type="radio" class="form-input" id="privacy" /><label
            for="privacy"
            >登录即代表你同意《AI 用户协议》</label
          >
        </div>
        <div class="footer-item">
          <input type="radio" class="form-input" id="autoLogin" /><label
            for="autoLogin"
            >下次自动登录</label
          >
        </div>
      </div>
    </form>
  </div>
  <SlideSplit
    v-if="slideShow"
    :bigImg="imgInfo.bigImageBase64"
    :smallImg="imgInfo.smallImageBase64"
    :bigWidth="imgInfo.bigWidth"
    :bigHeight="imgInfo.bigHeight"
    :smallWidth="imgInfo.smallWidth"
    :smallHeight="imgInfo.smallHeight"
    @sliderJudge="onJudge"
    @request-event="getImage"
  />
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
// 导入滑块组件
import SlideSplit from "@components/SlideSplit/index.vue";
// 导入api
import { getImageCode, verifyImageCode, loginVerification } from "@api/login";
// 表单数据
const phone = ref("");
const code = ref("");
// hooks
import { useUserInfo } from "@hooks/user";
// 处理登录
const handleSubmit = async () => {
  let res = await loginVerification(phone.value, code.value);
  if (res.code != 0) return;
  useUserInfo(res.data.token);
};
// 控制滑块
let slideShow = ref(false);
// 显示滑块
const showSlide = async () => {
  await getImage();
  slideShow.value = true;
};
// 滑块内容
const imgInfo = reactive({
  bigWidth: 0,
  bigHeight: 0,
  bigImageBase64: "",
  smallWidth: 0,
  smallHeight: 0,
  smallImageBase64: "",
});
// 请求滑块内容
const getImage = async () => {
  const res = await getImageCode(phone.value);
  if (res.code != 0) return;
  Object.assign(imgInfo, res.data);
};
// 滑动结束，验证滑块
const onJudge = async (movePosX: string) => {
  const res = await verifyImageCode(movePosX, phone.value);
  if (res.code != 0) {
    // 验证没通过，重新拿滑动内容
    getImage();
  } else {
    slideShow.value = false;
  }
};
</script>

<style lang="scss" scoped>
@import "@assets/css/style.scss";
.box {
  margin: 0 45px 23px 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  @include screen-change(1280px) {
    margin: 0 40px 20px 40px;
  }
  form {
    width: 100%;
    .form-item {
      width: 100%;
      margin-top: 20px;
      font-size: 13px;
      color: #232323;
    }
    .form-input {
      height: 46px;
      background: rgba(250, 240, 240, 0.8);
      border-radius: 9px 9px 9px 9px;
      border: none;
      padding-left: 13px;
      outline: none;
    }
    // 验证码
    .code {
      position: relative;
      input {
        width: 100%;
      }
      .send-code {
        position: absolute;
        right: 0;
        bottom: 0;
        height: 46px;
        border: none;
        background-color: transparent;
        font-size: 13px;
        color: #c90000;
        cursor: pointer;
      }
    }
    // 登录按钮
    .form-submit {
      background: #c90000;
      border-radius: 9px 9px 9px 9px;
      font-size: 20px;
      color: #ffffff;
      margin-top: 40px;
    }
    .form-footer {
      display: flex;
      justify-content: space-between;
      margin-top: 30px;
      .footer-item {
        display: flex;
        align-items: center;
        label {
          font-size: 12px;
          color: #232323;
          margin-left: 7px;
        }
      }
    }
  }
}
</style>
